<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 添加分类 -->
    <el-card class="box-card">
      <el-input
        placeholder="请输入内容"
        v-model="cat_id"
        clearable
        class="serch"
      ></el-input>
      <el-button icon="el-icon-search" border="0" @click="SearchCommtion"
        >搜索</el-button
      >
      <el-button type="primary" @click="dialogAddclass = true"
        >添加分类</el-button
      >
    </el-card>
    <!-- 页面渲染 -->
    <el-table
      :data="GoodClassTree"
      style="width: 100%; margin-bottom: 20px"
      row-key="cat_id"
      border
      height="400"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      >
      <el-table-column prop="cat_id" label="父类ID" sortable> </el-table-column>
      <el-table-column prop="cat_name" label="分类名称" sortable>
      </el-table-column>
      <el-table-column prop="cat_pid" label="父类父ID"> </el-table-column>
      <el-table-column prop="cat_level" label="分类当前层级">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.cat_level === 0">一级</el-tag>
          <el-tag type="success" v-else-if="scope.row.cat_level === 1"
            >二级</el-tag
          >
          <el-tag type="danger" v-else>三级</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="" label="操作" width="300">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click="EditorGoodsclass(scope.row)"
            >编辑</el-button
          >
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="DeleteGoodsclass(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加分类弹窗 -->
    <el-dialog title="添加分类" :visible.sync="dialogAddclass">
      <el-form :model="AddclassData">
        <el-form-item label="分类名称">
          <el-input
            v-model="AddclassData.cat_name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="分类父类ID">
          <el-input
            v-model="AddclassData.cat_pid"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item label="分类层级">
          <el-input
            v-model="AddclassData.cat_level"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddclass = false">取 消</el-button>
        <el-button type="primary" @click="okAddclass">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 分类详情弹窗 -->
    <el-dialog title="分类详情" :visible.sync="dialogClassdetails">
      <el-form :model="ClassdetailsData">
        <el-form-item label="分类ID">
          <el-input
            v-model="ClassdetailsData.cat_id"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="分类名称">
          <el-input
            v-model="ClassdetailsData.cat_name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="分类父ID">
          <el-input
            v-model="ClassdetailsData.cat_pid"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="分类层级">
          <el-input
            v-model="ClassdetailsData.cat_level"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogClassdetails = false">取 消</el-button>
        <el-button type="primary" @click="dialogClassdetails = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 编辑分类 -->
    <el-dialog title="分类详情" :visible.sync="dialogEditcategory">
      <el-form :model="EditcateData">
        <el-form-item label="分类ID">
          <el-input v-model="EditcateData.cat_id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="分类名称">
          <el-input
            v-model="EditcateData.cat_name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="分类父ID">
          <el-input
            v-model="EditcateData.cat_pid"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="分类层级">
          <el-input
            v-model="EditcateData.cat_level"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEditcategory = false">取 消</el-button>
        <el-button type="primary" @click="putEditcategory">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "VueCategories",

  data() {
    return {
      // 渲染数据
      GoodClassTree: [],
      //   添加弹窗
      dialogAddclass: false,
      //弹窗存储数据
      AddclassData: {},
      //查询id
      cat_id: "",
      //参数详情
      ClassdetailsData: {},
      //查询显示
      dialogClassdetails: false,
      //编辑弹窗
      dialogEditcategory: false,
      ///编辑储存
      EditcateData: {},
    };
  },
  methods: {
    //疯转渲染函数
    async getGoodClass() {
      var { data } = await this.$axios.get("/categories");
      this.GoodClassTree = data.data;
    },
    //添加分类
    async okAddclass() {
      //发送请求
      var { data } = await this.$axios.post("/categories", this.AddclassData);
      console.log(data);
      if (data.meta.status == 201) {
        this.$message({
          type: "success",
          message: data.meta.msg,
        });
        this.dialogAddclass = false;
        this.getGoodClass();
      } else {
        this.$message({
          type: "error",
          message: data.meta.msg,
        });
      }
    },
    //搜索
    async SearchCommtion() {
      this.dialogClassdetails = true;
      var { data } = await this.$axios.get("/categories/" + this.cat_id);
      //   console.log(data);
      if (data.meta.status == 200) {
        this.$message({
          type: "success",
          message: data.meta.msg,
        });
        this.ClassdetailsData = data.data;
      } else {
        this.$message({
          type: "error",
          message: data.meta.msg,
        });
      }
    },
    //编辑分类
    EditorGoodsclass(shopinfo) {
      this.EditcateData = shopinfo;
      this.dialogEditcategory = true;
    },
    //提价编辑分类
    async putEditcategory() {
      //发送请求
      var { data } = await this.$axios.put(
        "categories/" + this.EditcateData.cat_id,
        this.EditcateData
      );
      if (data.meta.status == 200) {
        this.$message({
          type: "success",
          message: data.meta.msg,
        });
        this.dialogEditcategory = false;
        this.getGoodClass();
      } else {
        this.$message({
          type: "error",
          message: data.meta.msg,
        });
      }
    },
    //删除分类
    DeleteGoodsclass(classinfo) {
      this.$confirm("此操作将永久删除该分类, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          var { data } = await this.$axios.delete(
            "/categories/" + classinfo.cat_id
          );
          //   console.log(data);
          if (data.meta.status == 200) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getGoodClass();
          } else {
            this.$message({
              type: "error",
              message: data.meta.msg,
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },

  mounted() {
    this.getGoodClass();
  },
};
</script>

<style>
.el-dialog__header {
  line-height: 0px;
}
.dialog-footer {
  line-height: 0px;
}
.has-gutter {
  line-height: 35px;
}
.el-row {
  line-height: 60px;
}
.el-card__body {
  line-height: 0px;
}
.serch {
  width: 22vw !important;
}
</style>